﻿<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<link href="css/mui.min.css" rel="stylesheet" />
		<link href="css/list-to-detail.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="css/icons-extra.css" />
		<link rel="stylesheet" type="text/css" href="css/detail.css" />
		<link rel="stylesheet" href="plugins/video-js-5.19.2/video-js.css" />
	</head>

	<body>
		<!--顶部导航-->
		<header class="mui-bar mui-bar-nav" id="detailHeaderData" v-cloak>
			<a class="mui-icon mui-action-back mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">{{meeting.subject}}</h1>
			<a id="btnpopover" class="mui-icon mui-action-menu mui-icon-bars mui-pull-right"></a>
		</header>
		<!--正文-->
		<div id="offCanvasWrapper" class="mui-off-canvas-wrap mui-draggable">
			<!--会议文档offCanvasSideR-->
			<aside id="" class="mui-off-canvas-right">
				<div id="offCanvasSideScrollR" class="mui-scroll-wrapper">
					<div class="mui-scroll" id="detailFiles" style="padding-bottom: 100px;">
					</div>
					<script type="text/html" id="filestmp">
						<div class="title" style="margin: 20px 0 5px 10px;">会议资料</div>
						<ul class="mui-table-view">
							{{if data.files.length == 0}}
							<li class="mui-col-xs-12">
								<div class="mui-col-xs-12">
									<h5 class="mui-h5" style="text-align:center;line-height: 30px; color: #DDD;">
										暂无资料下载
									</h5>
								</div>
							</li>
							{{else}} {{each data.files as item index}}
							<li class="mui-table-view-cell" data-path="{{item.accessPath}}" data-name="{{item.name}}">
								<div class="mui-col-xs-12">
									<h5 class="mui-h5">
                                            {{item.name}}
                                            </h5>
									<p class="mui-h6 mui-ellipsis" style="text-indent: 0; display: inline; color: #5d5f63;">
										{{item.createTime}}<button style="background: 0;border: 0; width: 25px; padding: 0; display:inline-block" class="mui-icon mui-icon-download"></button>
									</p>
								</div>
							</li>
							{{/each}} {{/if}}
						</ul>
					</script>
				</div>
			</aside>
			<!--参会人员offCanvasSideL-->
			<aside id="" class="mui-off-canvas-left">
				<div id="offCanvasSideScrollL" class="mui-scroll-wrapper">
					<div class="mui-scroll" id="detailAssistants" style="padding-bottom: 100px;">
					</div>
					<script type="text/html" id="assistantstmp">
						<div class="title" style="margin: 15px 0 15px 10px; color: #000;">与会人员({{data.members.length}}人)</span>
						</div>
						<ul class="mui-table-view">
							{{each data.members as item index}}
							<li class="mui-table-view-cell mui-media">
								{{if item.avatarUrl !=null}}
								<img class="mui-media-object mui-pull-left" src="{{item.avatarUrl}}"> {{else}}
								<img class="mui-media-object mui-pull-left" src="images/default.png"> {{/if}}
								<div class="mui-media-body">
									{{item.name}}<br /> {{if item.isAssistant == true }}
									<span class="mui-badge mui-badge-success">会议助理</span> {{/if}}
									<!--<button v-on:click="ban(item)">禁言</button>
									<button v-on:click="kickout(item)">踢出</button>-->
								</div>
							</li>
							{{/each}}
						</ul>
					</script>
				</div>
			</aside>
			<!--视频区域-->
			<div class="mui-content mui-inner-wrap" id="detailContentData">
				<div class="mui-scroll-wrapper">
					<div class="mui-scroll">
						<div class="mui-card" id="offCanvasContentScroll">
							<div class="detail-ct">
								<video webkit-playsinline playsinline id="videojs" class="video-js vjs-default-skin vjs-big-play-centered mui-media-object" style="width: 100%;" height="190px" autoplay="autoplay" controls="controls" preload="auto" loop="loop" poster="" x5-video-player-fullscreen="true" x5-video-player-type="h5">
									<source src="" type=""></source>
									<p class="vjs-no-js">
										To view this video please enable JavaScript, and consider upgrading to a web browser that
										<a href="http://videojs.com/html5-video-support/" target="_blank">
											supports HTML5 video
										</a>
									</p>
								</video>
								<div id="meetingInfo" style=" display: none; padding: 20px;">
									<div class="notes">
										<p>会议时间：{{meeting.beginTime}}<br /> 会议简介：{{meeting.introduction}}
											<br /> 会议主题：{{meeting.subject}}
										</p>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<!--聊天-->
				<div class="mui-scroll-wrapper" id="chat-msgs">
					<div class="mui-scroll" id='chat-msg'>
					</div>
				</div>
				<script id='msg-content' type="text/html">
					<div class="chat-user" style="font-size: 14px;">
						{{item.fromusername}}:
					</div>
					{{if item.msgtype!= 2}}
					<p style="text-indent: 1em;">{{item.content}}</p>
					{{else}}
					<p>
						<img src="{{item.content}}" data-preview-src="{{item.content}}" data-preview-group="1" style="max-width: 120px;max-height: 120px; vertical-align: middle; text-align: center; padding: 10px; display: block;" />
					</p>
					{{/if}}
				</script>
				<div id="tempdom" style="display: none;"></div>
				<!--历史记录模块-->
				<script id='msghistorytemplate' type="text/html">
					{{if totalnums > 10}}
					<div style="text-align: center; height: 60px; line-height: 60px; " class="showmore" data-meetingid="{{meetingid}}" data-offset="{{offset}}" data-limit="{{limit}}">
						<a class="chat-user" style="text-align: center; width: 100%; font-size: 14px;">
							查看更多信息
						</a>
					</div>
					{{/if}} {{each data as item index }}
					<div class="chat-user" style="font-size: 14px;">
						{{item.fromusername}}:
					</div>
					{{if item.msgType== 2}}
					<p>
						<img src="{{item.content}}" data-preview-src="{{item.content}}" data-preview-group="1" style="max-width: 120px;max-height: 120px; vertical-align: middle; text-align: center; padding: 10px; display: block;" />
					</p>
					{{else}}
					<p style="text-indent: 1em;">{{item.content}}</p>

					{{/if}} {{/each}}
				</script>
			</div>
			<!--底部菜单选项-->
			<nav class="mui-bar mui-bar-tab">
				<div class="mui-input-row">
					<label style="width: 10%;" id="vm-like">
                        <a id="btnLike" class="mui-icon mui-icon-extra mui-icon-extra-like">{{likeCount}}</a>
                   </label>
					<!--<label id="btn-send" style="width: 12%; float:right; margin-right: 10px; display: none;"><span class="mui-icon mui-icon-navigate" style="padding: 0; color: #999;"></span></label>-->
					<label id="btn-send" style="width: 18%; float:right; margin-right: 10px; display: none;">
						<button style="border: 0; background: #007aff; color: #fff;" >发送</button>
					</label>
					<label id="btn-file" style="width: 16%; float:right; margin-top: 4px; margin-right: 10px; "><span class="mui-icon mui-icon-plus" style="padding: 0; color: #999;"></span></label>
					<input id="txt-msg" type="search" class="mui-input" style="width: 65%;padding: 0px 7px;height: 36px;text-align: left;margin-top: 8px; background: #efeff4;" placeholder="文明发言">
				</div>
			</nav>
		</div>
		<!--右上角弹出菜单-->
		<div id="topPopover" class="mui-popover">
			<div class="mui-popover-arrow"></div>
			<div class="mui-scroll-wrapper">
				<ul class="mui-table-view" id="topPopoverHandle">
					<li class="mui-table-view-cell">
						<a href="javascrip:;" id="sMeeting">开始会议</a>
					</li>
					<li class="mui-table-view-cell">
						<a href="javascrip:;" id="eMeeting">结束会议</a>
					</li>
				</ul>
			</div>
		</div>

	</body>

</html>
<script type="text/javascript" src="js/mui.min.js"></script>
<script type="text/javascript" src="js/mui.zoom.js"></script>
<script type="text/javascript" src="js/mui.previewimage.js"></script>
<script type="text/javascript" src="js/jquery-2.1.0.js"></script>
<script type="text/javascript" src="js/vue.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>
<script type="text/javascript" src="js/config.js"></script>
<script type="text/javascript" src="js/server.js"></script>
<script type="text/javascript" src="plugins/video-js-5.19.2/video.js"></script>
<script type="text/javascript" src="plugins/video-js-5.19.2/videojs-contrib-hls4.js"></script>
<script type="text/javascript" src="plugins/videojs-hotkeys/videojs.hotkeys.min.js"></script>
<script type="text/javascript" src="js/template.js"></script>
<script type="text/javascript" src="js/detail.js"></script>